<!-- 查看学期院历 -->
<template>
  <div class="assessment-container">
    <div class="search-container" style="margin:0;padding-left:0">
      <div class="search-container-left" style="display: flex">
        <div class="search-container-item">
          <span>学期院历：</span>
          <el-select
            v-model="xq"
            style="width: 90px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.id"
              :label="item.xqmc"
              :value="item.xqmc"
            >
            </el-option>
          </el-select>
        </div>
        <!-- <el-button type="primary" icon="el-icon-search" @click="checkCalendarList" size="mini">查询</el-button> -->
        <div class="search-button" @click="checkCalendarList" style="margin: 3px 15px 0 0">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="year" label="年份" align="center" width="150">
        </el-table-column>
        <el-table-column prop="month" label="月份" align="center" width="150">
        </el-table-column>
        <el-table-column prop="weeks" label="周次" align="center" width="150">
        </el-table-column>
        <el-table-column label="星期" align="center">
          <el-table-column header-align="center" align="center" label="星期一">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期一" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期二">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期二" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期三">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期三" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期四">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期四" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期五">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期五" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期六">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期六" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column header-align="center" align="center" label="星期日">
            <template slot-scope="{ row, $index }">
              <div v-for="(item, index) in row.weekTimeVoList" :key="item.id">
                {{ item.week == "星期日" ? item.day : "" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="prop"
            label="事件说明"
            width="300"
          >
            <template slot-scope="{ row, $index }">
              <el-input
                v-model="row.sysTermRemarks.remarks"
                class="detail-input"
                type="textarea"
                style="width:95%"
                autosize
                @blur="saveRemarks(row)"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  reqGetCalendarList,
  reqSaveRemarks,
  reqGetXqList,
  reqcheckCalendarList
} from "@/api/admin1/check.js";
export default {
  data() {
    return {
      id:'',
      value: new Date(),
      xqList: [],
      xq: "",
      tableData: [
        {
          day: "",
          month: "",
          sysTermRemarks: {},
          time: "",
          week: "",
          weeks: "",
          year: ""
        }
      ],
      spanArrYear: [],
      positionYear: 0,
      spanArrMonth: [],
      positionMonth: 0,
      spanArrWeeks: [],
      positionWeeks: 0
    };
  },
  methods: {
    //根据id初始化页面
    async getCalendarList() {
      this.xq = this.$route.query.xq;
      const result = await reqGetCalendarList(this.$route.query.id);
      if (result.data.code == 200) {
        this.tableData = result.data.data;
        this.rowspan();
      }
    },
    // 表格实现合并行
    // rowIndex 当前行号
    // columnIndex 当前列号
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //表格合并行
      if (columnIndex === 0) {
        const _row = this.spanArrYear[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1) {
        const _row = this.spanArrMonth[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        const _row = this.spanArrWeeks[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    rowspan() {
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          this.spanArrYear.push(1);
          this.positionYear = 0;
          this.spanArrMonth.push(1);
          this.positionMonth = 0;
          this.spanArrWeeks.push(1);
          this.positionWeeks = 0;
        } else {
          if (this.tableData[index].year === this.tableData[index - 1].year) {
            this.spanArrYear[this.positionYear] += 1;
            this.spanArrYear.push(0);
          } else {
            this.spanArrYear.push(1);
            this.positionYear = index;
          }
          if (this.tableData[index].month === this.tableData[index - 1].month) {
            this.spanArrMonth[this.positionMonth] += 1;
            this.spanArrMonth.push(0);
          } else {
            this.spanArrMonth.push(1);
            this.positionMonth = index;
          }
          if (this.tableData[index].weeks === this.tableData[index - 1].weeks) {
            this.spanArrWeeks[this.positionWeeks] += 1;
            this.spanArrWeeks.push(0);
          } else {
            this.spanArrWeeks.push(1);
            this.positionWeeks = index;
          }
        }
      });
    },
    // 获取学期院历列表
    async getXqList() {
      const result = await reqGetXqList();
      if (result.data.code == 200) {
        this.xqList = result.data.data;
      }
    },
    // 鼠标失去焦点时触发
    async saveRemarks(row) {
      const obj = {
        endtrem: row.weekTimeVoList[row.weekTimeVoList.length - 1].time,
        id: row.sysTermRemarks.id,
        identid: row.xueqiid,
        remarks: row.sysTermRemarks.remarks,
        starttrem: row.weekTimeVoList[0].time
      };
      const result = await reqSaveRemarks(obj);
      if (result.data.code == 200) {
        return "ok";
      }
    },
    // 查询点击事件
    async checkCalendarList() {
      if(this.xq == ''){
        return false;
      }
      const result = await reqcheckCalendarList(this.xq);
      if (result.data.code == 200) {
        this.tableData = result.data.data;
      }
    }
  },
  mounted() {
    this.getCalendarList();
    this.getXqList();
  }
};
</script>
<style lang="less" scoped>
.manual-entry-container {
  .el-dialog__body {
    > div {
      width: 1014px;
      border: 1px solid rgba(0, 76, 167, 0.8);
      border-radius: 6px;
      margin: 0 auto;

      > div {
        border-bottom: 1px solid rgba(0, 76, 167, 0.39);

        &:last-child {
          border-bottom: none;
        }

        > div {
          display: flex;

          > div {
            height: 96px;
            display: flex;
            align-items: center;
            justify-content: center;

            &:nth-child(1) {
              width: 80%;

              text-align: center;
              font-size: 16px;
              font-weight: bold;
              color: #004ca7;
            }

            &:nth-child(1) {
              height: 200px;
            }
          }
        }
      }
    }
  }

  .el-dialog__footer {
    padding-bottom: 43px;
  }

  /* .dialog-footer {
    > button {
      width: 95px;
      height: 36px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 6px;
      background: rgba(255, 246, 239, 1);
      font-size: 18px;
      color: #f3b815;
    }
  } */
}

.assessment-container {
  width: 100% !important;
  .export-report-container {
    .el-dialog__body {
      padding: 64px 0 64px 50px;

      .el-radio {
        margin-right: 79px;
      }
    }

    .el-dialog__footer {
      padding-bottom: 103px;
    }
  }
  .block {
    margin-top: 30px;
    .el-pagination {
      // width: 500px;
      margin: 0 auto;
    }
  }
  .import-report-container {
    .el-dialog__body {
      padding-left: 165px;
      padding-top: 71px;
      padding-bottom: 60px;

      > div {
        > span {
          font-size: 18px;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          vertical-align: middle;
        }

        > input {
          width: 254px;
          height: 25px;
          border: 1px solid #004ca7;
          opacity: 1;
          border-radius: 4px;
          padding-left: 5px;
          margin-right: 8px;
          color: #004ca7;
          vertical-align: middle;
        }

        > div {
          display: inline-block;
          font-size: 18px;
          padding: 1px 10px;
          border-radius: 4px;
          vertical-align: middle;
          cursor: pointer;

          &:nth-child(3) {
            color: rgba(2, 200, 108, 1);
            background: #f1fff8;
            border: 1px solid #02c86c;
            position: relative;
            margin-right: 20px;

            > input {
              width: 822px;
              position: absolute;
              left: -767px;

              cursor: pointer;
            }
          }

          &:nth-child(4) {
            color: rgba(82, 48, 233, 1);
            background: rgba(235, 230, 255, 1);
            border: 1px solid rgba(82, 48, 233, 1);
          }
        }
      }
    }

    .el-dialog__footer {
      padding-bottom: 76px;

      .green {
        padding: 1px 17px;
      }
    }
  }
}

.plan-entry-table-container {
  margin-top: 30px;
  width: 100%;
  margin: 0 auto;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
.plsc-button {
  height: 28px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.cjrc-button {
  height: 28px;
  background: #efebff;
  border: 1px solid #5230e9;
  border-radius: 6px;
  color: #5230e9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/print-entry.less";

.plan-entry-table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
// 日历的样式修改
/deep/.el-table .cell {
  padding: 0;
}
/deep/.el-calendar__header {
  display: none;
}
/deep/.el-calendar__body {
  padding: 0;
}
/deep/.el-calendar-table thead th {
  text-align: center;
}
</style>
<style lang="less" scoped>
/deep/.detail-input .el-textarea__inner {
  border: 0 none;
}
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
</style>
